<template>
    <header>
        <div class="search">
            <van-search v-model="value" placeholder="请输入菜谱关键词" @focus="linktoSearch"/>
        </div>
        <van-icon name="bars" size="26px" color="#000"/>
        <van-badge :content="5" :offset="[-3,3]">
            <van-icon name="fire-o" size="26px" color="#000" />
        </van-badge>
    </header>
    <van-tabs v-model:active="activeName" color="#f6c64a" @click-tab="onClickTab">
        <van-tab v-for="item in tabList" :key="item.name" :title="item.title" :name="item.name"></van-tab>
    </van-tabs>
    <div class="content">
        <router-view v-slot="{ Component }">
            <keep-alive>
                <component :is="Component" :key="$route.path"/>
            </keep-alive>
        </router-view>
<!--        <keep-alive>-->
<!--            <router-view></router-view>-->
<!--        </keep-alive>-->

    </div>

</template>

<script lang="ts" setup>
import { useRouter ,useRoute} from "vue-router";
import {ref,onMounted} from "vue";
import {useHomeStore} from '../stores/home'
defineOptions({
    name: 'Home',
})
let activeName:any = ref<string>('follow');
let value = ref('');
const tabList=[
    {title:'关注',name:'follow'},
    {title:'推荐',name:'recommendation'},
    {title:'笔记',name:'note'},
    {title:'视频',name:'video'},
    {title:'活动',name:'activity'}
]
const router = useRouter();
const route = useRoute();
const home = useHomeStore();
const onClickTab = ({name}:any) => {
    router.push({name})
}
//跳转到搜索页面
let linktoSearch: () => void = (): void => {
    router.push({path:"/search",query:{path:route.fullPath}})
}
onMounted(()=>{
    let ishome = localStorage.getItem('home');
    if(ishome==null){
        home.removeFollowList(-1);
    }
    activeName.value = route.name
})
</script>

<style scoped lang="scss">
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 50px;
    background-color: #fff;
    .search{
        width: 80%;
    }
}
.content{
    height: calc(100vh - 150px);
    overflow: auto;
}
</style>